<template>
    <div class="goodsinfo-container">

    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
        <!-- <h3>商品详情页面</h3> -->
        <!-- 商品轮播图区域 -->
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner1">
						<img src="../../images/1.jpg" alt="" width="374px" height="236px">
					</div>
				</div>
			</div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">商品名称</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="pricle">
							市场价：<del>￥2399</del>&nbsp;&nbsp;销售价：<span class="now_price">￥2199</span>
						</p>
						<p>购买数量：<numbox @getcount="getSelectedCount" :max="99"></numbox></p>
						<p>
							<mt-button type="primary" size="small">立即购买</mt-button>3
							<mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
							<!-- 分析：如何实现加入购物车的时候，拿到选择的数量 -->

						</p>
					</div>
				</div>
			</div>
        <!-- 商品参数区域 -->
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：SD9232214404</p>
						<p>库存情况：99件</p>
						<p>上架时间：2015-04-20 01:19:30</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<router-link to="/home/goodsdesc/">
					<mt-button type="primary" size="large" plain>图文介绍</mt-button>
					</router-link>

					<router-link to="/home/goodscomment/">
					<mt-button type="danger" size="large" plain>商品评论</mt-button>
					</router-link>
				</div>
			</div>
    </div>
</template>

<script>
//导入 数字选择框 组件
import numbox from '../subcomponents/goodsinfo_numbox.vue';
export default {
	data() {
		return {
			ballFlag:false,
			selectedCount:1
		}
	},
    components:{
	  numbox
	},
	methods: {
		addToShopCar(){
			//添加到购物车
			this.ballFlag = !this.ballFlag;
		},
		beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetWidth;

      // 小球动画优化思路：
      // 1. 先分析导致 动画 不准确的 本质原因： 我们把 小球 最终 位移到的 位置，已经局限在了某一分辨率下的 滚动条未滚动的情况下；
      // 2. 只要分辨率和 测试的时候不一样，或者 滚动条有一定的滚动距离之后， 问题就出现了；
      // 3. 因此，我们经过分析，得到结论： 不能把 位置的 横纵坐标 直接写死了，而是应该 根据不同情况，动态计算这个坐标值；
      // 4. 经过分析，得出解题思路： 先得到 徽标的 横纵 坐标，再得到 小球的 横纵坐标，然后 让 y 值 求差， x 值也求 差，得到 的结果，就是横纵坐标要位移的距离
      // 5. 如何 获取 徽标和小球的 位置？？？   domObject.getBoundingClientRect()

      // 获取小球的 在页面中的位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      // 获取 徽标 在页面中的位置
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();

      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;

      el.style.transform = `translate(${xDist}px, ${yDist}px)`;
      el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
      done();
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
		},
		getSelectedCount(count){
		//当子组件把 选中的数量传递给父组件的时候，把选中的值保存到 data 上
		this.selectedCount = count;
		console.log('父组件拿到的值为:'+this.selectedCount);
		}
	}
}
</script>

<style lang="scss" scoped>
    .goodsinfo-container{
        background-color: #eee;
        overflow: hidden;
    }
	.now_price{
		color: red;
		font-size: 16px;
		font-weight: bold;

	}
	.mui-card-content-inner1{
		padding: 0px;
	}
	.mui-card-footer{
		display: block;
		button{
			margin: 15px 0;
		}
	}
	.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
		position: absolute;
		z-index: 99;
		top: 401px;
		left: 147px;
		
		
	}
</style>
